<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="700px"
    @close="close"
  >
    <el-scrollbar class="order-detail-scrollbar">
      <el-form ref="orderDetail" :model="orderDetail" :rules="rules" label-width="80px" v-loading="detailLoading" element-loading-text="加载中~请稍等">
        <el-form-item label="订单号" prop="orderID">
          <el-input v-model.trim="orderDetail.orderID" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="微信昵称" prop="wxName">
          <el-input v-model.trim="orderDetail.wxName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contactName">
          <el-input v-model.trim="updateRequest.contactName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model.trim="updateRequest.phone"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model.trim="updateRequest.address"></el-input>
        </el-form-item>
        <el-form-item label="商品清单" prop="goodsList">
          <el-collapse v-for="(item, index) in orderDetail.goodsList" :key="index">
            <el-collapse-item :title="item.goodsName" :name="index">
              <el-form-item label="商品图片" prop="goodsLogo">
                <img :src="item.goodsLogo" width="200px">
              </el-form-item>
              <el-form-item label="类型" prop="selectType">
                <el-tag type="info" v-model="item.selectType">{{item.selectType}}</el-tag>
              </el-form-item>
              <el-form-item label="单价" prop="goodsPrice">
                <el-tag type="info" v-model="item.goodsPrice">{{item.goodsPrice}}</el-tag>
              </el-form-item>
              <el-form-item label="数量" prop="chooseNum">
                <el-tag type="info" v-model="item.chooseNum">{{item.chooseNum}}</el-tag>
              </el-form-item>
              <el-form-item label="运费" prop="postage">
                <el-tag type="info" v-model="item.postage">{{item.postage}}</el-tag>
              </el-form-item>
              <el-form-item label="商品总价" prop="price">
                <el-tag type="info" v-model="item.price">{{item.price}}</el-tag>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-form-item>
        <el-form-item label="下单金额" prop="money">
          <el-input v-model.trim="orderDetail.money" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="下单时间" prop="time">
          <el-input v-model.trim="orderDetail.time" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="订单运费" prop="postage">
          <el-input v-model.trim="orderDetail.postage" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="订单状态" prop="state">
          <el-select v-model="updateRequest.state">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流公司" prop="logistics">
          <el-input v-model.trim="updateRequest.logistics" placeholder="暂未发货"></el-input>
        </el-form-item>
        <el-form-item label="物流单号" prop="logisticsID">
          <el-input v-model.trim="updateRequest.logisticsId" placeholder="暂无"></el-input>
        </el-form-item>
        <el-form-item label="订单备注" prop="note">
          <el-input type="textarea" v-model.trim="orderDetail.note" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getOrderDetail, updateOrderInfo } from '@/api/order'

  export default {
    name: 'OrderManagementEdit',
    data() {
      return {
        detailLoading: true,
        options: [{
          value: '待发货',
          label: '待发货'
        }, {
          value: '部分发货',
          label: '部分发货'
        }, {
          value: '已发货',
          label: '已发货'
        }, {
          value: '已收货',
          label: '已收货'
        }, {
          value: '用户申请退款',
          label: '用户申请退款'
        }, {
          value: '已退款',
          label: '已退款'
        }],
        updateRequest:{},
        orderDetail:{},
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      async showEdit(orderID) {
        this.title = '编辑'
        this.dialogFormVisible = true
        this.detailLoading = true
        const {data} = await getOrderDetail(orderID)
        this.updateRequest = {
          orderID: orderID,
          state: data.state,
          logistics: data.logistics,
          logisticsId: data.logisticsID,
          contactName: data.contactName,
          address: data.address,
          phone: data.phone
        }
        this.orderDetail = data
        this.detailLoading = false
      },
      close() {
        this.dialogFormVisible = false
      },
      save() {
        this.$confirm('您确定要更新该订单信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info '
        }).then(() => {
          this.updateOrder()
        });
      },
      async updateOrder() {
        this.detailLoading = true
        const {code} = await updateOrderInfo(this.updateRequest)
        this.detailLoading = false
        if (code===1000) {
          this.$message({
            type: 'success',
            message: '更新成功'
          });     
        } else {
          this.$message.error('更新失败，请检查网络是否正常');
        }
        this.dialogFormVisible = false
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import url("//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css");
  .order-detail-scrollbar {
    height: 600px;
  }
</style>